<template>
  <div class="ProductUpdate-panel">
    <!-- 资源更新进度条弹窗 -->
    <ProductUpdateComponent :ProductUpdatePercent="State.ProductUpdatePercent"
      :ProductUpdateBoolean="State.ProductUpdateBoolean"></ProductUpdateComponent>
    <!-- 资源加载组件 -->
    <!-- <DetectUpdates :ProductUpdatePercent="State.DetectUpdatePercent" :ProductUpdateBoolean="State.DetectUpdatesBoolean"
      v-if="State.DetectUpdatesBoolean">
    </DetectUpdates> -->
    <!-- 产品更新对话框 -->
    <DialogComponents :DialogComponent="ComponDialogComponent" @click="ProductUpdateFns" class="dialog">
    </DialogComponents>
    <!-- <div class="DetectionProgress" style="height: 50px; width: 50px; backgroung: pink">检测资源更新进度</div> -->
    <div class="demo-progress">
      <!-- 圆形 -->
      <!-- <el-progress type="circle" :width="119" :height="119"  :percentage="State.DetectUpdatePercent">
        <template #default="{ percentage }">
          <span class="percentage-value">{{ percentage }}%</span>
          <span class="percentage-label">资源检测更新中...</span>
        </template>
      </el-progress> -->
      <!-- 条形 -->
      <!-- v-if="State.DetectUpdatePercent != 100" -->
      <!--           :stroke-width="20" -->
      <div v-if="State.DetectUpdatePercent != 100">
        <el-progress
          :percentage="State.DetectUpdatePercent"
          :show-text="false"
        >
        </el-progress>
        <span class="txtResource">资源检测更新中...</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { defineComponent, reactive, toRef, toRefs, onMounted } from "vue";
import DialogComponents from "@/components/compon/DialogComponents.vue";
import ProductUpdateComponent from "@/components/produc/ProductUpdateComponent.vue";
import DetectUpdates from "@/components/produc/DetectUpdates.vue";
import router from '@/router'
export default defineComponent({
  name: "ProductUpdate",
  components: {
    DialogComponents,
    ProductUpdateComponent,
    DetectUpdates,
  },
  setup() {
    // let timeStart = new Date().valueOf()
    sessionStorage.setItem('timeStart', JSON.stringify(new Date().valueOf()))
    let State = reactive({
      ProductUpdatePercent: 0,
      DetectUpdatePercent: 0,
      ProductUpdateBoolean: false,
      DetectUpdatesBoolean: false,
    })
    //产品提示(通用对话框)
    let ComponDialogComponent = reactive({
      Dialogboolean: false,
      Msg: " ",
      Speanstyles: {
      },
      Buttonstyle: {
        background: "linear-gradient(-90deg, #0974D8, #3D8EF1, #7C7FF8)",
      },
      Buttonname: "确定",
    })
    //产品更新
    function ProductUpdateFns(fn) {
      if (fn === 'Cancel') {
        ComponDialogComponent.Dialogboolean = false
        // router.push({
        //   name: 'Loading',
        // });

        // State.ProductUpdateBoolean = true
        // UpdateProduct()
      }
      if (fn === 'Ready') {
        ComponDialogComponent.Dialogboolean = false
        State.ProductUpdateBoolean = true
        UpdateProduct()
      }
    }
    async function UpdateProduct() {
      let rep = await Application.PostMessageAsync(Opcode.PlatformUpdateRequest, {})
    }
    //发布更新指令
    //判断平台是否需要更新
    function OnPlatformUpdateSign() {
      window.Application.InitializeAsync().then(date => {
        let rep = Application.PostMessageAsync(Opcode.PlatformCheckUpdateRequest, { VerifyMode: 0 })
        rep.then((message) => {
          if (message.Size && message.Size !== "0Byte") {


            // ElMessageBox.confirm(
            //   "平台更新包大小:" + message.Size + ",是否下载更新,更新后将会关闭运行的软件",
            //   '提示',
            //   {
            //     confirmButtonText: '确认',
            //     cancelButtonText: '取消',
            //     type: 'warning',
            //   }
            // )
            //   .then(() => {
            //     ElMessage({
            //       type: 'success',
            //       UpdateProduct()
            //     })
            //   })
            //   .catch(() => {
            //     ElMessage({
            //       type: 'info',
            //     })
            //   })

            setTimeout(function () {
              ComponDialogComponent.Dialogboolean = true
              // ComponDialogComponent.Msg = "平台更新包大小:" + message.Size + ",是否下载更新,更新后将会关闭运行的软件"
              ComponDialogComponent.Msg = "您有新的内容需要更新，本次更新大小为" + message.Size + "，更新后会自动重启平台并关闭当前运行的产品，如需下次更新，请点击取消。"
            }, 1000);


          } else if (message.Size === "0Byte") {

            State.DetectUpdatePercent = 100

            // setTimeout(function () {
            //   State.DetectUpdatesBoolean = false
            //   router.push({
            //     name: 'Loading',
            //   });
            // }, 1000);


          } else {
            State.DetectUpdatePercent = 100

            // setTimeout(function () {
            //   State.DetectUpdatesBoolean = false
            //   router.push({
            //     name: 'Loading',
            //   });
            // }, 1000);

          }
        })
      })
    }
    //监听下载事件
    function OnPlatUpdateProgressSignalReceived(message) {
      console.log(message.TotalPercent)
      State.ProductUpdatePercent = message.TotalPercent
      if (State.ProductUpdatePercent == 100) {
        setTimeout(function () {
          Application.PostMessageAsync(Opcode.PlatformApplyUpdateMessage, { CurrentDownloadingTask: "P10099", DownloadTaskQueue: self.Queue });
        }, 1200);
      }
    }
    //监听检测进度
    function Ondetection(message) {
      // console.log(message)
      State.DetectUpdatePercent = message.TotalPercent
      if (State.DetectUpdatePercent == 100) {
        setTimeout(function () {
          State.DetectUpdatesBoolean = false
        }, 1000);
      }
    }
    onMounted(async () => {
      console.log(sessionStorage.getItem('timeStart'));
      // console.log('进入后的时间戳：',timeStart);
      console.log('更新资源数据');
      Application.Register(Opcode.ProductCheckUpdateProgressMessage, Ondetection);
      Application.Register(Opcode.PlatformDownloadProgressMessage, OnPlatUpdateProgressSignalReceived);
      OnPlatformUpdateSign()
      State.DetectUpdatesBoolean = true
    });
    return {
      // timeStart,
      State,
      ComponDialogComponent,
      ProductUpdateFns,
    };
  },
});
</script>
<style scoped lang="less">
/deep/ .el-progress-bar__outer {
  width: 83px;
  height: 8px !important;
  position: absolute;
  left: 19px;
  bottom: 21px;
}
/deep/ .el-progress-bar__inner {
  animation-duration: none !important;
}
.txtResource {
  font-size: 12px;
  color: white;
  position: absolute;
  bottom: 10px;
  left: 17px;
}
.demo-progress {
  position: absolute;
  bottom: 38px;
  z-index: 1;
}
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  color: white;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: white;
}
.dialog {
  padding: 50px;
}

.ProductUpdate-panel {
  width: 100%;
  height: 100%;
}
.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
</style>
